<template>
  <a-modal 
    :title="title" 
    :width="800" 
    :visible="visible" 
    :confirm-loading="confirmLoading" 
    cancel-text="关闭" 
    @ok="submit" 
    @cancel="closeModal"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="年级">
          <a-select placeholder="全部类型" v-decorator="['grade', validatorRules.grade ]">
            <a-select-option :value="item.val" v-for="(item, index) in gradeUl" :key="index">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="医院模块">
          <a-select placeholder="全部类型" v-decorator="['module', validatorRules.module ]" @change="moduleChange">
            <a-select-option :value="item.val" v-for="(item, index) in moduleUl" :key="index">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="医院纬度" v-if="moduleValue == 2">
          <a-select placeholder="全部类型" v-decorator="['dimension', validatorRules.dimension ]">
            <a-select-option :value="item.val" v-for="(item, index) in dimensionUl" :key="index">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="分值区间 最小">
          <a-input-number
            style="width:200px"
            placeholder="输入最小值"
            :min="0"
            :max="99"
            v-decorator="[ 'min', {initialValue: 0} ]"
          />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="分值区间 最大">
          <a-input-number
            style="width:200px"
            placeholder="输入答案分值"
            :min="1"
            :max="99"
            v-decorator="[ 'max', {initialValue: 1} ]"
          />
          <a-tag color="orange">若已经完成【1-5】，后续填写为【6-10】【11-15】，数字不能出现覆盖情况</a-tag>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="报告内容">
          <Editor @printEdito="printEdito" ref="head"></Editor>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import ApiTree from '@/api/evaluation/reportList';
import Editor from '@/views/components/Editor';
import { Slime } from '@/mixins/slime';
import { evaFiltersMixin } from "@/mixins/evaMixin";
export default {
  name: 'reportListModal',
  mixins: [Slime, evaFiltersMixin],
  components: {Editor},
  data() {
    return {
      title: '编辑',
      form: this.$form.createForm(this),
      model: {},
      validatorRules: {
        grade: { rules: [{ required: true, message: '请输入内容!' }] },
        module: { rules: [{ required: true, message: '请输入内容!' }] },
        dimension: { rules: [{ required: true, message: '请输入内容!' }] },
      },
      id: 0,
      moduleValue: null,
      comment:'',
    };
  },
  methods: {
    // 增
    crudCreate() {
      this.crudUpdate({});
    },
    // 改
    crudUpdate(record) {
      this.form.resetFields(); //重新设置领域
      this.visible = true;
      if(!record.id){
        return false
      }
      ApiTree.getDetail(record.id)
        .then((res) => {
          let data = res.result
          this.id = data.id;
          this.form.setFieldsValue({
            grade: data.grade,
            module: data.module,
            dimension: data.dimension,
            min: data.min,
            max: data.max,
          });
          this.$refs.head.childFunction(data.comment);
        })
        .finally(() => {
        });
    },
    // 提交
    submit() {
      const that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let param = {
            ...values,
            comment: this.comment,
          }
          if (!that.id) {
            that.submitCreate(param);
          } else {
            param = {...param, id:that.id}
            that.submitUpdate(param);
          }
        }
      });
    },
    // 提交 增
    submitCreate(param) {
      const that = this;
      ApiTree.getAdd(param)
        .then((res) => {
          that.$message.success('新增成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 提交 改
    submitUpdate(param) {
      const that = this;
      ApiTree.getUpdate(param)
        .then((res) => {
          that.$message.success('编辑成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 弹窗-关闭
    closeModal() {
      this.confirmLoading = false;
      this.visible = false;
      this.form.resetFields();
      this.id = null
      this.moduleValue = null
      this.$refs.head.childFunction('');
      this.$emit('closeModal');
    },
    //模块改变
    moduleChange(val){
      this.moduleValue = val
    },
    printEdito(comment){
      this.comment = comment
    }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>